<template>
  <div>
    <div class="crm-container">
      <c-r-m-head
        ref="crmTableHead"
        :crm-type="'consumeDept'"
        @handle="createHandle"
        @on-search="crmSearch"
        @name="nameChange"
        @date="dateChange"
        title="渠道名称"
        placeholder="请选择"
      >
      </c-r-m-head>
      <div class="table-container">
        <el-table
          v-loading="loading"
          id="crm-table"
          :row-height="40"
          :data="list"
          border
          :cell-class-name="cellClassName"
          :height="tableHeight"
          :row-key="`${crmType}Id`"
          class="n-table--border"
          highlight-current-row
          style="width: 100%"
          @row-click="handleRowClick"
          @sort-change="sortChange"
        >
          <!-- <el-table-column prop="putinPlatform" label="渠道名称" align="center">
            <template slot-scope="scope">
              <span
                    @click="nameClick(scope.row)"
                    class="ellipsis color_blue"
                    >{{ scope.row.putinPlatform }}</span
                  >
            </template>
          </el-table-column> -->
          <el-table-column
            v-for="(item, index) in fieldList"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="fieldFormatter"
            sortable="custom"
            show-overflow-tooltip
            align="center"
          >
            <!-- <template slot-scope="scope">
              <template v-if="item.prop == 'fun'">
                <span class="can-visit--underline" @click="updeteRow(scope.row)">修改1</span>
              </template>
              <template v-else>
                {{ fieldFormatter(scope.row, scope.column) }}
              </template>
            </template> -->
          </el-table-column>
          <!-- <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="updeteRow(scope.row)"
                v-if="scope.row.isSuper != 1"
                >修改</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
        <div class="p-contianer">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size.sync="pageSize"
            :total="totalRow"
            :pager-count="5"
            class="p-bar"
            background
            layout="prev, pager, next, sizes, total, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <!-- <span class="money-bar">消耗总金额总计:{{ extraData.putinMoneySum }}</span> -->
          <span class="money-bar"
            >消耗总金额总计:{{ extraData.putinMoneySum }}</span
          >
        </div>
      </div>
    </div>
    <newDialog
      v-if="dilogShow"
      :dilogShow="dilogShow"
      @transferVal="transferValHandle"
      @update="upDate"
      :currentRow1="currentRow1"
    ></newDialog>

    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      :direction="direction"
      :size="387"
      :before-close="handleClose"
    >
      <div
        style="width: 348px;height: 1px;background: #E5E5E5;margin:0 auto;"
      ></div>
      <div class="drawer-body">
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="详情" name="first">
              <div class="content">
                <p class="detail-cell">
                  <span class="detail-cell__label">客户来源</span>
                  <span class="detail-cell__value">
                    {{ currentRow.putinPlatform }}</span
                  >
                </p>
                <p class="detail-cell">
                  <span class="detail-cell__label">消耗日期</span>
                  <span class="detail-cell__value">
                    {{ currentRow.putinFormDate }}</span
                  >
                </p>
                <p class="detail-cell">
                  <span class="detail-cell__label">消耗部门</span>
                  <span class="detail-cell__value">
                    {{ currentRow.deptName }}</span
                  >
                </p>
                <p class="detail-cell">
                  <span class="detail-cell__label">创建时间</span>
                  <span class="detail-cell__value">
                    {{ currentRow.createTime }}</span
                  >
                </p>
                <p class="detail-cell">
                  <span class="detail-cell__label">创建人</span>
                  <span class="detail-cell__value">
                    {{ currentRow.createUserName }}</span
                  >
                </p>
                <p class="detail-cell">
                  <span class="detail-cell__label">备注</span>
                  <span class="detail-cell__value">
                    {{ currentRow.remark }}</span
                  >
                </p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="操作记录" name="second">
              <div
                v-loading="loading"
                v-empty="operateList"
                xs-empty-custom-close="1"
                class="rc-cont"
                style="padding-right:10%;min-height:500px;"
              >
                <flexbox
                  v-for="(item, index) in operateList"
                  :key="index"
                  class="ha-cont"
                  align="stretch"
                  justify="flex-start"
                >
                  <div class="ha-week">
                    <span>
                      {{
                        item.createTime | filterTimestampToFormatTime("MM-DD")
                      }}
                    </span>
                    <span class="ml-10">
                      {{
                        item.createTime | filterTimestampToFormatTime("HH:mm")
                      }}
                    </span>
                  </div>
                  <div
                    class="ha-circle d-flex align-items-center justify-content-center"
                  />
                  <div class="d-flex flex-column">
                    <div class="ha-name">{{ item.realname }}</div>
                    <div class="ha-content">
                      <p
                        v-for="(info, infoIndex) in item.content"
                        :key="infoIndex"
                      >
                        {{ info }}
                      </p>
                    </div>
                  </div>

                  <div class="ha-line" />
                </flexbox>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// 表头组件
import CRMHead from "./components/CRMHead";
import newDialog from "./components/newDialog.vue";
// import test from "./test.vue";

import Table from "./mixins/table";
import { getRoiDataByIdAPI, queryRecordListAPI } from "@/api/roi";

export default {
  /** ROI消耗 */

  name: "consumeDept",
  mixins: [Table],
  data() {
    return {
      crmType: "consumeDept",
      createShow: false, // 新建消耗
      dilogShow: false,
      drawerTitle: "",
      drawer: false,
      direction: "rtl",
      activeName: "first",
      currentRow: {},
      currentRow1: {},
      name: "",
      date: "",
      loading: false,
      operateList: [],
      rowID: ""
    };
  },
  components: {
    CRMHead,
    newDialog
    // test
  },
  computed: {},
  mounted() {
    /** 控制table的高度 */
    window.onresize = () => {
      this.tableHeight = document.documentElement.clientHeight - 300;
      this.treeHeight = document.documentElement.clientHeight - 230;
    };
    console.log(this.getMoney, "===???===");
  },
  methods: {
    createHandle(val) {
      if (val == "1") {
        this.dilogShow = true;
      }
    },
    transferValHandle(val) {
      this.dilogShow = val;
      this.currentRow1 = {};
    },
    upDate() {
      this.getList();
      // const params = val
    },
    /**
     * 新增
     */
    // 当某一行被点击时会触发该事件
    handleRowClick(row, column, event) {
      console.log(row, column, "--0--");
      if (this.crmType === "consume") {
        if (column.property === "putinPlatform") {
          this.loading = false;
          this.drawer = true;
          this.rowID = row.putinId;
          this.rowType = "consume";
          this.drawerTitle = "渠道名称：" + row.putinPlatform;
          const params = {
            putinId: this.rowID
          };
          getRoiDataByIdAPI(params)
            .then(res => {
              console.log(res.data, "--res.data--");
              const showList = [
                // {
                //   ''
                // }
              ];

              this.currentRow = res.data;
            })
            .catch(() => {
              this.drawer = false;
            });
          // 操作记录
          queryRecordListAPI({
            types: 27,
            actionId: this.rowID
          })
            .then(res => {
              this.operateList = res.data.map(item => {
                item.createTime = new Date(item.createTime).getTime();
                return item;
              });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
        }
      }
    },
    handleClose(done) {
      this.activeName = "first";
      setTimeout(() => {
        done();
      }, 300);
    },
    handleClick(tab) {},

    /** 修改操作点击 */
    updeteRow(val) {
      this.currentRow1 = val;
      this.dilogShow = true;
    },
    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "putinPlatform") {
        return "can-visit--underline";
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";
.table-container {
  margin-top: 16px;
  padding: 16px;
  background-color: #fff;
}
// 列表金额
.money-bar {
  color: #99a9bf;
  line-height: 44px !important;
  position: absolute;
  left: 20px;
  top: 0;
}
/deep/ #el-drawer__title {
  margin-bottom: 20px;
  & span {
    color: #333;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    margin-left: 48px;
  }
}
.drawer-body {
  padding: 10px 18px;
  /deep/ .el-tabs__nav-wrap {
    margin: 0 18px;
    background: #f5f6fb;
  }
  /deep/ .el-descriptions__body {
    padding: 5px 18px;
    font-size: 13px;
    color: #333;
    font-weight: bold;
  }
  /deep/ .el-descriptions-item__label {
    font-weight: bold;
    margin-right: 20px;
  }
}
.ha-cont {
  font-size: 12px;
  position: relative;
  line-height: 20px;
  min-height: 80px;
  padding-top: 3px;
  .ha-week {
    margin: 0 10px 0 0;
    flex-shrink: 0;
    color: #333333;
    font-size: 13px;
    width: 80px;
  }
  .ha-time {
    padding: 0 10px 0 24px;
    flex-shrink: 0;
    color: #aaa;
  }
  .ha-circle {
    width: 28px;
    height: 28px;
    background: #e5effe;
    border-radius: 50%;
    margin-top: -4px;
    z-index: 2;
  }
  .ha-circle::after {
    content: " ";
    display: block;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 1px solid #0066f9;
    border-radius: 50%;
  }
  .ha-img {
    flex-shrink: 0;
    margin: -3px 10px 0 10px;
    display: block;
  }
  .ha-name {
    padding: 0 10px;
    flex-shrink: 0;
    color: #333;
    font-weight: bold;
    font-size: 14px;
  }
  .ha-content {
    padding: 12px 10px 10px 10px;
    flex: 1;
    color: #666;
    font-size: 13px;
  }
  .ha-line {
    position: absolute;
    z-index: 1;
    width: 1px;
    top: 3px;
    bottom: -3px;
    left: 103px;
    background-color: #e6e6e6;
  }
}
.ha-cont:last-child {
  .ha-line::after {
    display: block;
    content: " ";
    width: 10px;
    height: 10px;
    background: #d5d5d5;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: -4px;
  }
}

.content {
  padding: 0 10px;
  .detail-cell {
    font-size: 12px;
    margin: 20px 10px;
    &__label {
      color: #666;
    }
    &__value {
      display: inline-block;
      margin-top: 5px;
      color: #333;
      line-height: 16px;
      margin-left: 30px;
    }
  }
}
</style>
